<template>
    <el-breadcrumb :separator-icon="ArrowRight">
        <el-breadcrumb-item v-for="(route, i) in breadcrumbList">
            <!-- 最末尾的级别 span 不给跳转, 其他的router-link可以跳转 -->
            <span v-if="breadcrumbList.length - 1 === i">{{ route?.meta?.title }}</span>
            <router-link v-else :to="route">{{ route?.meta?.title }}</router-link>
        </el-breadcrumb-item>
    </el-breadcrumb>
</template>
<script lang="ts">
export default {
    name:'GBreadcrumb'
}
</script>
<script lang="ts" setup>
import { ArrowRight } from '@element-plus/icons-vue'
import { useRoute } from "vue-router"
import { computed } from "vue"

const route= useRoute()
const breadcrumbList=computed(()=>{
     // 路由匹配后的路由对象  /a/home
    return route.matched.filter(r => {
        return r?.meta?.title
    })
})
</script>